<template>
  <div>
    <el-radio-group :disabled="disabled" v-model="radio" @change="change" size="large">
      <el-radio
        v-for="item in option"
        :label="item.value"
        :key="item.value"
        size="large"
        >{{ item.label }}</el-radio
      >
    </el-radio-group>
  </div>
</template>

<script setup>
import { ref, watch, onMounted } from "vue";

const props = defineProps({
  modelValue: {
    default: null
  },
  option: {
    default: []
  },
  disabled: {
    default: false
  }
});

const emit = defineEmits(["update:modelValue"]);

const radio = ref(0);
onMounted(() => {
  radio.value = props.modelValue;
});

function change(val) {
  emit("update:modelValue", val);
}

watch(
  () => props.modelValue,
  (val) => {
    radio.value = val;
  },
  {
    deep: true
  }
);
</script>
